<template>
  <div class="NavRouteList" style="border-right: 1px solid var(--border)">
    <router-link
      class="text-center hover:bg-SysActive p-2 text-sm rounded"
      v-for="(item, index) in tabNavList"
      :key="index"
      :to="item.path"
      exact-active-class="active"
    >
      {{ item.title }}
    </router-link>
  </div>
</template>

<script setup lang="ts">
let tabNavList = [
  {
    title: "通用",
    path: "/systemSetting/common",
  },
  {
    title: "存储设置",
    path: "/systemSetting/fileStore",
  },
  {
    title: "隐私设置",
    path: "/systemSetting/privacy",
  },
  {
    title: "锁定设置",
    path: "/systemSetting/lock",
  },
  {
    title: "多彩主题",
    path: "/systemSetting/theme",
  },
];
</script>

<style lang="scss" scoped>
.NavRouteList {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--border);
  padding: 10px;
}
.active {
  background-color: var(--bg-sys-active);
}
</style>
